<template>
	<view class="clockPage">
		<view class="nowDate">
			<text class="icon-calendar iconfont" 
			style="margin-right: 5px;color:#009688;font-weight: 700;"></text>
			{{nowDate}}
		</view>
		<view class="clockInfo">
			<view class="clockInfoItem"  v-for="(item,key) in workTime" :key="key">
				<text class="iconfont icon-messagecenter-fill tipIcon"></text>
				<view class="clockDetail">
					<text class="clockInfoTitle">{{item.title}} {{item.time}}</text>
					<text class="clockDetailTxt" v-if="item.clockTime">打卡时间 {{item.clockTime}}</text>
					<view class="clockDetailLoc" v-if="item.add">
						<text class="iconfont icon-map" style="color:#aaaaaa"></text>
						<text class="clockDetailLocTxt">{{item.add}}</text>
					</view>
				</view>
			</view>	
		</view>
		<view class="clockBtnWrap" hover-class="hoverBtn" @click="clockTime">
			<text class="clockBtnTime">{{nowTime}}</text>
			<text>第2次打卡</text>
		</view>
		
		<view class="clockMap">
			<text class="mapTxt">{{location}}</text>
			<text class="iconfont icon-map mapIcon" @click="chooseLocation"></text>
		</view>
		<view class="clockTip">
			如有打卡异常，请
			<text class="clockTipTxt" @click="askForLeave">提交考勤流程 >> </text>
		</view>
		<custom-tab-bar curUrl="/pages/home/clockPage"/>
	</view>
</template>

<script>
import customTabBar from '../components/customTabBar.vue'
export default {
	name: 'clockPage',
	components: {
		customTabBar
	},
	data() {
		return {
			nowDate:'',
			nowTime:'',
			location:'地理位置未获取到',
			workTime:[
				{'title':'上班时间','time':"09:00",'clockTime':'08:39:01','add':'南京江宁麒麟创业园'},
				{'title':'下班时间','time':"18:00",'clockTime':null,'add':null}
			],
			timer:null
		}
	},
	methods: {
		askForLeave(){
			uni.navigateTo({
				url:`/pages/home/leaveForm?type=补打卡`,
				animationType: 'pop-in',
				animationDuration: 200
			})
		},
		clockTime(){
			this.workTime[1].clockTime = this.nowTime
			this.workTime[1].add = this.location
		},
		getNowDate(){
			let nowTime = new Date()
			this.nowDate = this.$formatTime(nowTime,"YYYY-MM-DD")
		},
		getNowTime(){
			let nowTime = new Date()
			this.nowTime = this.$formatTime(nowTime,"hh:mm:ss")
		},
		chooseLocation(){
			let _this = this
			uni.chooseLocation({
				success(res) {
					let {latitude,longitude} = res
					latitude = res.latitude.toString();
					longitude = res.longitude.toString();
					_this.getDetailLocation(latitude,longitude)
				}
			})
		},
		getBaseLocation(){  //2. 获取地理位置
			let _this=this;
			uni.getLocation({
				type: 'wgs84',
				success (res) {
					let latitude,longitude;
					latitude = res.latitude.toString();
					longitude = res.longitude.toString();
					_this.getDetailLocation(latitude,longitude)	
				},
				fail() {
					uni.showToast({
						title:'获取地理位置失败',
						icon:'none'
					})
				}
			});
		},
		getDetailLocation(latitude,longitude){
			let key = '1d7f2f28108b331cf3d3024a726bcaaa';
			let _this=this;
			uni.request({
				header:{
					"Content-Type": "application/text"
				},
				//url:'http://apis.map.qq.com/ws/geocoder/v1/?location='+latitude+','+longitude+'&key=MVGBZ-R2U3U-W5CVY-2PQID-AT4VZ-PDF35',
				url:`http://restapi.amap.com/v3/geocode/regeo?key=${key}&location=${longitude},${latitude}`,
				success(re) {	   
					if(re.statusCode===200){
						let locationRes = re.data.regeocode
						let {province,city,district,township} = locationRes.addressComponent
						let {street} = locationRes.addressComponent.streetNumber
						_this.location = `${city} ${district} ${township} ${street}`
					}else{
						console.log("获取信息失败，请重试！")
					}
				 }
			});
		}
	},
	onReady(){
	    this.getBaseLocation()
		this.getNowDate()
		this.getNowTime()
		this.timer = setInterval(()=>{
			this.getNowTime()
		},1000)
	},
	onUnload() {
		clearInterval(this.timer)
		this.timer = null
	},
	onBackPress(){
		
	}
};
</script>

<style scoped lang="scss">
.clockPage{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.nowDate{
	width: 100%;
	padding: 16.66rpx;
	border-bottom:1px solid #cccccc;
}
.clockBtnWrap{
	border-radius: 100%;
	width: 312.5rpx;
	height: 312.5rpx;
	border:16.66rpx solid $themeColor;
	background-color: #FFFFFF;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	.clockBtnTime{
		font-size: 52.08rpx;
		font-weight: 700;
		margin-bottom: 4.16rpx;
	}
	&.hoverBtn{
		background-color: $themeColor;
		box-shadow: 3px 3px 3px #fff inset;
		border:none;
		color:#fff;
	}
}
.clockMap{
	height: 208.33rpx;
	display: flex;
	align-items: center;
	font-size: 37.5rpx;
	color:$themeColor;
	font-weight: 700;
	.mapIcon{
		font-size: 37.5rpx;
		text-decoration: underline;
	}
	.mapTxt{
		margin-right: 5px;
	}
}
.clockInfo{
	display: flex;
	flex-direction: column;
	align-items: left;
	width: 100%;
	height: 416.66rpx;
	padding:0 41.66rpx;
}
.clockInfoItem{
	padding:10.41rpx 0;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	.tipIcon{
		color:#aaaaaa;
		font-size:33.33rpx;
		margin-top: 6.25rpx;
		margin-right: 6.25rpx;
	}
	.clockDetail{
		display: flex;
		flex-direction: column;
		.clockInfoTitle{
			color:#aaaaaa;
			font-size: 29.16rpx;
			padding:10.41rpx 0;
		}
		.clockDetailTxt{
			color:#000000;
			font-size: 14px;
			padding:10.41rpx 0;
		}
	}

	.clockInfoTxt{
		font-size:33.33rpx;
		color:#AAAAAA;
		margin-right: 10.41rpx;
	}
	.clockDetailLoc{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		.clockDetailLocTxt{
			color:#AAAAAA;
			font-size: 25rpx;
		}
	}
	
}
.clockTip{
	position: fixed;
	left: 0;
	right: 0;
	bottom:104.16rpx;
	padding:10.41rpx;
	text-align: center;
	background-color:#e9e9ea;
	.clockTipTxt{
		margin-left: 20.83rpx;
		color:$themeColor;
		text-decoration: underline;
	}
}
</style>
